import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Button,
  Steps,
  Input,
  InputNumber,
  Cascader,
  Checkbox,
  Radio,
  DatePicker,
  Form,
  Icon,
  Tooltip,
  Row,
  Col,
  Select,
  Switch,
  TreeSelect,
  Table,
  Card,
  Divider,
  Popover,
  Popconfirm,
  Tag,
  Alert,
  Modal,
} from 'antd';
import FileList from '@/components/FileList';
import api from '@/common/api';
import { getRowSpanList, getRowSpanRender } from '@/utils/tableUtils';
import { fileList, cascaderOptions, checkboxOptions, dataSource, tableData } from './testData';

const { Step } = Steps;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TreeNode } = TreeSelect;

@Form.create()
@connect()
class AntDesignDemo extends Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    const { visible } = this.state;
    const {
      form: { getFieldDecorator },
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        key: 'action',
        width: 360,
        render: () => (
          <span>
            <a onClick={this.showModal}>编辑</a>
            <Divider type="vertical" />
            <Popover content="content" title="Title">
              <a>确认</a>
              <Divider type="vertical" />
              <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">
                <a>
                  <span className="red">删除</span>
                </a>
              </Popconfirm>
            </Popover>
          </span>
        ),
      },
    ];
    const pagination = {
      showTotal: () => `每页 ${10} 条，共 ${2} 条`,
      current: Number(1),
      total: 2,
      pageSize: 10,
    };

    const columns2 = [
      {
        title: 'Name',
        dataIndex: 'name',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };
          obj.props.rowSpan = getRowSpanList(tableData, 'name')[index];
          return obj;
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Home phone',
        dataIndex: 'tel',
      },
    ];

    const columns3 = [
      {
        title: 'Name',
        dataIndex: 'name',
        render: (value, row, index) => getRowSpanRender(value, index, tableData, 'name'),
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Home phone',
        dataIndex: 'tel',
      },
    ];

    return (
      <Card>
        <Alert message="Success Text" type="success" />
        <br />
        <Alert message="Success Tips" type="success" showIcon />
        {/* 自定义样式 */}
        <div style={{ margin: '0.4rem' }}>
          <span className="red">红色</span>
          &nbsp;&nbsp;
          <span className="green">绿色</span>
          &nbsp;&nbsp;
          <Icon type="minus-circle" />
          &nbsp;&nbsp;
          {/* 开关 */}
          <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
          {/* 文件列表 */}
          <FileList
            list={fileList}
            downloadUrl="fileDownloadUrl"
            style={{ padding: '0.2rem' }}
          />
        </div>
        {/* 按钮 */}
        <div style={{ margin: '0.4rem' }}>
          <Button type="primary" size="large">
            Large
          </Button>
          &nbsp;&nbsp;
          <Button type="primary">Normal</Button>
          &nbsp;&nbsp;
          <Button type="primary" icon="download">
            Download
          </Button>
          &nbsp;&nbsp;
          <Button type="primary" size="small">
            Small
          </Button>
        </div>
        {/* 步骤条 */}
        <div style={{ margin: '0.4rem' }}>
          <Steps current={1}>
            <Step title="Finished" description="This is a description." />
            <Step title="In Progress" description="This is a description." />
            <Step title="Waiting" description="This is a description." />
          </Steps>
        </div>
        {/* 输入 */}
        <div style={{ margin: '0.4rem' }}>
          <Input placeholder="Basic usage" style={{ width: '4rem' }} />
          &nbsp;&nbsp;
          <InputNumber placeholder="InputNumber" style={{ width: '4rem' }} />
          &nbsp;&nbsp;
          <Cascader
            defaultValue={['zhejiang', 'hangzhou', 'xihu']}
            options={cascaderOptions}
            style={{ width: '7rem' }}
          />
          &nbsp;&nbsp;
          <DatePicker />
          &nbsp;&nbsp;
          <RangePicker />
          &nbsp;&nbsp;
        </div>
        {/* 多选 */}
        <div style={{ margin: '0.4rem' }}>
          <Checkbox value="A" checked>
            A
          </Checkbox>
          <Checkbox value="B">B</Checkbox>
          <Checkbox value="C">C</Checkbox>
          <Checkbox.Group options={checkboxOptions} />
        </div>
        {/* 单选 */}
        <div style={{ margin: '0.4rem' }}>
          <Radio value={1} checked>
            A
          </Radio>
          <Radio value={2}>B</Radio>
          <Radio value={3}>C</Radio>
          <Radio.Group>
            <Radio value={1} checked>
              A
            </Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
          </Radio.Group>
          <Radio.Group defaultValue="a">
            <Radio.Button value="a">Hangzhou</Radio.Button>
            <Radio.Button value="b" disabled>
              Shanghai
            </Radio.Button>
            <Radio.Button value="c">Beijing</Radio.Button>
          </Radio.Group>
        </div>
        {/* 下拉 */}
        <div style={{ margin: '0.4rem' }}>
          <Select placeholder="Please select" style={{ width: '4rem' }}>
            <Option value="jack">Jackffffffff</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
          &nbsp;&nbsp;
          <Select mode="multiple" style={{ width: '6rem' }} placeholder="Please select">
            <Option value="a10">a10</Option>
            <Option value="c12">c12</Option>
          </Select>
          &nbsp;&nbsp;
          <TreeSelect
            showSearch
            style={{ width: '6rem' }}
            dropdownStyle={{ maxHeight: '8rem', overflow: 'auto' }}
            placeholder="Please select"
            allowClear
            treeDefaultExpandAll
          >
            <TreeNode value="parent 1" title="parent 1" key="0-1">
              <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
                <TreeNode value="leaf1" title="my leaf" key="random" />
                <TreeNode value="leaf2" title="your leaf" key="random1" />
              </TreeNode>
              <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
                <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
              </TreeNode>
            </TreeNode>
          </TreeSelect>
        </div>
        {/* 标签 */}
        <div style={{ margin: '0.4rem' }}>
          <Tag>Tag 1</Tag>
          <Tag closable>Tag 2</Tag>
        </div>
        {/* 表单 */}
        <Form onSubmit={this.handleSubmit}>
          <Form.Item
            {...formItemLayout}
            label={
              <span>
                Nickname&nbsp;
                <Tooltip title="What do you want others to call you?">
                  <Icon type="question-circle-o" />
                </Tooltip>
              </span>
            }
          >
            {getFieldDecorator('nickname', {
              rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
            })(<Input />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="Phone Number">
            {getFieldDecorator('phone', {
              rules: [{ required: true, message: 'Please input your phone number!' }],
            })(<Input addonBefore="+86" style={{ width: '100%' }} />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="Captcha">
            <Row gutter={8}>
              <Col span={12}>
                {getFieldDecorator('captcha', {
                  rules: [{ required: true, message: 'Please input the captcha you got!' }],
                })(<Input />)}
              </Col>
              <Col span={12}>
                <Button>Get captcha</Button>
              </Col>
            </Row>
          </Form.Item>
        </Form>
        {/* 表格 */}
        <div style={{ margin: '0.4rem' }}>
          <Table dataSource={dataSource} columns={columns} pagination={false} size="small" />
          <br />
          <Table dataSource={dataSource} columns={columns} pagination={pagination} />
          <br />
          <Table columns={columns2} dataSource={tableData} bordered pagination={false} />
          <br />
          <Table columns={columns3} dataSource={tableData} bordered pagination={false} />
        </div>
        {/* 弹窗 */}
        <Modal
          title="Basic Modal"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </Card>
    );
  }
}

export default AntDesignDemo;
